<template>
	<swiper class="swiper" :indicator-dots="true" indicator-color="#fff9c1" indicator-active-color="#ffdc00">
		<swiper-item v-for="pageNum in Math.ceil(gridlist.length / 10)" :key="pageNum">
			<uni-grid class="uni-grid" :column="col" :showBorder="border" :indicator-dots="true">
				<uni-grid-item v-for="(item, index) in gridlist.slice(10*(pageNum-1), 10*pageNum)" :key="item.id"
					:class="{'active': itemIndex === item.id}" @click="handleItemClick(item.id)">
					<image :src="item.src" class="uni-grid-item-image" @click.stop="handleImageClick(item.id)"></image>
					<text class="uni-grid-item-text" @click.stop="handleImageClick(item.id)">{{ item.name }}</text>
				</uni-grid-item>
			</uni-grid>
		</swiper-item>
	</swiper>
</template>


<script>
	export default {
		name: "Grid",
		data() {
			return {
				itemIndex: 0, // 当前选中项索引
				col: 5, // 列数
				border: false, // 是否显示边框
				gridlist: [{
						id: 0,
						src: "/static/caixi/推荐.png",
						name: "推荐"
					},
					{
						id: 1,
						src: "/static/caixi/shaokao.png",
						name: "烧烤烤肉"
					},
					{
						id: 2,
						src: "/static/caixi/jiaozi.png",
						name: "饺子馄饨"
					},
					{
						id: 3,
						src: "/static/caixi/mianshi.png",
						name: "米粉面食"
					},
					{
						id: 4,
						src: "/static/caixi/jiancan.png",
						name: "地方菜系"
					},
					{
						id: 5,
						src: "/static/caixi/huangmenjimifan.png",
						name: "冒菜麻辣烫"
					},
					{
						id: 6,
						src: "/static/caixi/malatangganguo.png",
						name: "川湘菜"
					},
					{
						id: 7,
						src: "/static/caixi/kaoya.png",
						name: "特色小吃"
					},
					{
						id: 8,
						src: "/static/caixi/huoguo.png",
						name: "火锅"
					},
					{
						id: 9,
						src: "/static/caixi/hanbao.png",
						name: "汉堡薯条"
					},
					{
						id: 10,
						src: "/static/caixi/shaokao.png",
						name: "烧烤烤肉"
					},
					{
						id: 11,
						src: "/static/caixi/jiaozi.png",
						name: "饺子馄饨"
					},
					{
						id: 12,
						src: "/static/caixi/mianshi.png",
						name: "米粉面食"
					},
					{
						id: 13,
						src: "/static/caixi/jiancan.png",
						name: "地方菜系"
					},
					{
						id: 14,
						src: "/static/caixi/huangmenjimifan.png",
						name: "冒菜麻辣烫"
					},
					{
						id: 15,
						src: "/static/caixi/malatangganguo.png",
						name: "川湘菜"
					},
					{
						id: 16,
						src: "/static/caixi/kaoya.png",
						name: "特色小吃"
					},
					{
						id: 17,
						src: "/static/caixi/huoguo.png",
						name: "火锅"
					},
					{
						id: 18,
						src: "/static/caixi/hanbao.png",
						name: "汉堡薯条"
					},
					{
						id: 19,
						src: "/static/caixi/hanbao.png",
						name: "汉堡薯条"
					}
				],
			};
		},
		methods: {
			handleItemClick(index) {
				this.itemIndex = index;
				console.log("Clicked item index:", index);
				this.sendToWaterfall(index);
			},
			handleImageClick(index) {
				this.sendToWaterfall(index);
			},
			sendToWaterfall(index) {
				this.itemIndex = index;
				uni.$emit('aEven', this.itemIndex);
			}
		},
	};
</script>


<style lang="scss" scoped>
	swiper {
		height: 200px;
	}

	.uni-grid {
		padding: 0; // 去除内边距
		border-radius: 5px; // 圆角边框
	}

	uni-grid-item {
		display: flex; // 使用弹性布局
		flex-direction: column; // 弹性子元素垂直排列
		align-items: center; // 弹性子元素在交叉轴上居中对齐
		justify-content: center; // 弹性子元素在主轴上居中对齐
		padding: 8px 0; // 上下内边距为8px，左右为0
		border-radius: 16px; // 圆角边框
		background: #ffffff; // 背景色为白色
		transition: all 0.3s ease; // 所有属性变化时，以0.3秒的缓动效果过渡

		&.active {
			background: linear-gradient(145deg, #ffd700, #ffefc2); // 选中时背景为从#ffd700到#ffefc2的线性渐变
			box-shadow: 0 6px 16px rgba(255, 215, 0, 0.5); // 盒子阴影效果
			transform: scale(1.05); // 选中时放大1.05倍
		}

		&:hover {
			background: #f4f4f4; // 鼠标悬停时背景色变为浅灰色
			transform: scale(1.02); // 鼠标悬停时轻微放大1.02倍
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 鼠标悬停时的盒子阴影效果
		}
	}

	.uni-grid-item-text {
		font-size: 14px; // 字体大小为14px
		font-weight: 500; // 字体加粗
		color: #333333; // 字体颜色为深灰色
		margin-top: 10px; // 上外边距为10px
		text-align: center; // 文本居中对齐
	}

	.uni-grid-item-image {
		width: 65px; // 宽度为65px
		height: 65px; // 高度为65px
		border-radius: 50%; // 圆形边框
		background-color: #f8f8f8; // 背景色为浅灰色，用于图片未加载时显示
		object-fit: cover; // 图片保持宽高比缩放，填充整个容器
		transition: transform 0.3s ease; // 变换效果以0.3秒的缓动效果过渡

		&:hover {
			transform: scale(1.1); // 鼠标悬停时图片放大1.1倍
		}
	}
</style>